<template>
	<div>
		<a-button @click="setData">回显</a-button>

		<a-button @click="getData">提交</a-button>

		<snowy-form-build :value="jsonData" ref="KFB" @submit="handleSubmit" :config="formConfig" />
	</div>
</template>
<script>
	export default {
		name: 'Test',
		data() {
			return {
				formConfig: {
					uploadFile: 'http://localhost:82/dev/file/uploadDynamicReturnUrl', // 上传文件地址
					uploadImage: 'http://localhost:82/dev/file/uploadDynamicReturnUrl', // 上传图片地址
					uploadFileName: '', // 上传文件name
					uploadImageName: '', // 上传图片name
					uploadFileData: { data: 666 }, // 上传文件额外参数
					uploadImageData: { data: 666 }, // 上传图片额外参数
					uploadFileHeaders: { token: '4Elxzb4D1dAGMe3en2COa1GEcZRIQoe4' }, // 上传文件请求头部
					uploadImageHeaders: { token: '4Elxzb4D1dAGMe3en2COa1GEcZRIQoe4' }, // 上传图片请求头部
					getOrgTree: (params) => {
						// 模拟接口请求，获取用户列表，返回Promise
						return Promise.resolve([])
					}
				},

				jsonData: {
					list: [
						{
							type: 'select',
							label: '下拉选择器',
							options: {
								width: '100%',
								multiple: false,
								disabled: false,
								clearable: false,
								hidden: false,
								placeholder: '请选择',
								dynamic: true,
								options: [
									{
										label: '正常',
										value: '0'
									},
									{
										label: '停用',
										value: '1'
									},
									{
										label: '删除',
										value: '2'
									}
								],
								showSearch: true,
								dynamicKey: 'common_status',
								defaultValue: ''
							},
							model: 'TYPES',
							key: 'TYPES',
							help: '',
							rules: [
								{
									required: false,
									message: '必填项'
								}
							],
							selectTable: 'sys_user',
							selectTableType: 'parent'
						},
						{
							type: 'xnUserSelector',
							label: '用户选择器',
							options: {
								width: '100%',
								defaultValue: [],
								placeholder: '请选择人员',
								hidden: false,
								disabled: true,
								getOrgTree: undefined,
								getOrgTree: undefined,
								radioModel: true
							},
							key: 'START_USER_SELECTOR',
							model: 'START_USER_SELECTOR',
							help: '',
							rules: [
								{
									required: true,
									message: '请选择用户'
								}
							],
							selectTable: 'sys_user',
							selectTableType: 'parent'
						},
						{
							type: 'time',
							label: '时间选择框',
							icon: 'icon-time',
							options: {
								width: '100%',
								defaultValue: '',
								disabled: false,
								hidden: false,
								clearable: false,
								placeholder: '请选择',
								format: 'HH:mm:ss'
							},
							model: 'TIMES',
							key: 'TIMES',
							help: '',
							rules: [{ required: false, message: '必填项' }]
						},
						{
							type: 'input',
							label: '订单标题',
							options: {
								type: 'text',
								width: '100%',
								defaultValue: '',
								placeholder: '请输入',
								clearable: false,
								maxLength: null,
								addonBefore: '',
								addonAfter: '',
								hidden: false,
								disabled: false
							},
							events: { onChange: '', onPressEnter: '', onFocus: '', onBlur: '' },
							model: 'SUBJECT',
							key: 'SUBJECT',
							help: '',
							rules: [{ required: false, message: '必填项' }],
							selectTable: 'PAY_ORDER',
							selectTableType: 'parent',
							selectColumn: 'SUBJECT'
						},
						{
							type: 'editor',
							label: '订单描述',
							list: [],
							options: {
								height: 300,
								ref: 'snowyEditor',
								placeholder: '请输入',
								defaultValue: '',
								chinesization: true,
								hidden: false,
								disabled: false,
								showLabel: true,
								width: '100%'
							},
							events: { onChange: '' },
							model: 'BODY',
							key: 'BODY',
							help: '',
							rules: [{ required: true, message: '必填项' }],
							selectTable: 'PAY_ORDER',
							selectTableType: 'parent',
							selectColumn: 'BODY'
						},
						{
							type: 'batch',
							label: '订单明细',
							list: [
								{
									type: 'date',
									label: '修改时间',
									icon: 'icon-calendar',
									options: {
										width: '100%',
										defaultValue: '',
										rangeDefaultValue: [],
										range: false,
										showTime: false,
										disabled: false,
										hidden: false,
										clearable: false,
										placeholder: '请选择',
										rangePlaceholder: ['开始时间', '结束时间'],
										format: 'YYYY-MM-DD'
									},
									events: { onChange: '', onFocus: '', onBlur: '', onOk: '' },
									model: 'UPDATE_TIME',
									key: 'UPDATE_TIME',
									help: '',
									rules: [{ required: false, message: '必填项' }],
									selectColumn: 'UPDATE_TIME'
								},
								{
									type: 'input',
									label: '产品名称',
									icon: 'icon-write',
									options: {
										type: 'text',
										width: '100%',
										defaultValue: '',
										placeholder: '请输入',
										clearable: false,
										maxLength: null,
										addonBefore: '',
										addonAfter: '',
										hidden: false,
										disabled: false
									},
									events: { onChange: '', onPressEnter: '', onFocus: '', onBlur: '' },
									model: 'PRODUCT_NAME',
									key: 'PRODUCT_NAME',
									help: '',
									rules: [{ required: true, message: '必填项' }],
									selectColumn: 'PRODUCT_NAME',
									selectTable: 'PAY_ORDER',
									selectTableType: 'parent'
								},
								{
									type: 'select',
									label: '产品价格',
									icon: 'icon-xiala',
									options: {
										width: '100%',
										multiple: false,
										disabled: false,
										clearable: false,
										hidden: false,
										placeholder: '请选择',
										dynamic: false,
										options: [
											{ value: '1', label: '下拉框1' },
											{ value: '2', label: '下拉框2' }
										],
										showSearch: false
									},
									events: {
										onChange: '',
										onDeselect: '',
										onDropdownVisibleChange: '',
										onFocus: '',
										onInputKeyDown: '',
										onMouseenter: '',
										onMouseleave: '',
										onPopupScroll: '',
										onSearch: '',
										onSelect: ''
									},
									model: 'PRODUCT_AMOUNT',
									key: 'PRODUCT_AMOUNT',
									help: '',
									rules: [{ required: false, message: '必填项' }],
									selectColumn: 'PRODUCT_AMOUNT'
								}
							],
							options: {
								scrollY: 0,
								disabled: false,
								hidden: false,
								showLabel: true,
								hideSequence: false,
								width: '100%'
							},
							model: 'PAY_ORDER_DETAILS',
							key: 'PAY_ORDER_DETAILS',
							help: '',
							selectTable: 'PAY_ORDER_DETAILS'
						}
					],
					config: {
						layout: 'horizontal',
						labelCol: { xs: 4, sm: 4, md: 4, lg: 4, xl: 4, xxl: 4 },
						labelWidth: 100,
						labelLayout: 'flex',
						wrapperCol: { xs: 18, sm: 18, md: 18, lg: 18, xl: 18, xxl: 18 },
						hideRequiredMark: false,
						customStyle: ''
					}
				}
			}
		},
		methods: {
			handleSubmit(p) {
				// 通过表单提交按钮触发，获取promise对象
				p()
					.then((res) => {
						// 获取数据成功
						alert(JSON.stringify(res))
					})
					.catch((err) => {
						console.log(err, '校验失败')
					})
			},
			show() {
				this.$refs.KFB.show(['date_1619948975172'])
			},
			hide() {
				this.$refs.KFB.hide(['date_1619948975172'])
			},
			disable() {
				this.$refs.KFB.disable(['date_1619948975172'])
			},
			enable() {
				this.$refs.KFB.enable(['date_1619948975172'])
			},
			getData() {
				// 通过函数获取数据
				this.$refs.KFB.getData()
					.then((res) => {
						// 获取数据成功
						console.log('---:' + JSON.stringify(res))
					})
					.catch((err) => {
						console.log(err, '校验失败')
					})
			},
			setData() {
				console.log('回显start')
				const json = {
					SUBJECT: '订单标题',
					BODY: '<p><strong class="ql-size-huge">大苏打速度都是发烧的发烧的发生的发生 大苏打速度</strong></p>',
					PAY_ORDER_DETAILS: [
						{ UPDATE_TIME: '2023-10-25', PRODUCT_NAME: '名称', PRODUCT_AMOUNT: '1', key: 1696653709770 }
					]
				}
				this.$refs.KFB.setData(json)
				console.log('回显end')
			}
		}
	}
</script>
